window.onload = function () {
    // 获取元素
    let list = document.querySelector(".list");
    let pagination = document.querySelector(".pagination");
    let pageSize = 5;
    let index = 1;

    // 因为分页需要 获取数据的总数量来决定页数
    // 刚进入页面的时候第一次请求的数据 
    getData(index);
    async function getData(index) {
        let res = await pAjax({
            url: "./list.php",
            data: {
                index: index,
                len: pageSize,
            },
        });
        res = JSON.parse(res);
        console.log(1000);
        console.log(res);
        // 需要把商品列表存在 本地存储中
        localStorage.setItem('dataList', JSON.stringify(res.list))
        //记得转为json数据。



        //下面无关详情页
        // 渲染列表页
        render(res.list);
        console.log(2);
        // 因为当页数不是第一页的是说明已经 显示了分页 不需要再次分页
        if (index != 1) return

        // 分页
        new Pagination(pagination, {
            pageInfo: {
                pagenum: 1,
                pagesize: pageSize, // 5
                total: res.total, //7
                totalpage: Math.ceil(res.total / pageSize),
            },
            textInfo: {
                first: "首页",
                prev: "上一页",
                next: "下一页",
                last: "末页",
            },
            change: function (idx) {
                getData(idx);
                // 需要滚动条设置在顶部
                scrollTo({
                    top: 0
                })
            }
        });
    }


    function render(data) {
        let str = "";
        data.forEach((item) => {
            str += `<div class="list-nav">
                <img src="${item.ba}" alt="">
                <p><span>${item.yi}</span></p>
                <p><span>￥${item.san}</span></p>
                <p><a href="../shop/shop.html?id=${item.goods_id}" id="look">查看详情</a></p>
            </div>`;
        });
        list.innerHTML = str;
    }
};
//！！！只要list的跳转参数与数据库对应数据的id值对应就可以了。